<script setup lang="ts">
  import { PropType, ref, watch } from 'vue'
  import { useGetAddressList } from '@/services/pages/return-factory'

  const { addressList, getAddressListLoading, getAddressList } = useGetAddressList()

  defineOptions({
    name: 'BaseInfoReturnFactoryModuleDetail',
  })

  const props = defineProps({
    moduleDetail: {
      type: Object as PropType<ReturnFactoryModuleDetail>,
      required: true,
    },
  })

  const address = ref('')

  watch(
    () => props.moduleDetail.repairAddrStoreId,
    async (value) => {
      await getAddressList()
      addressList.value.forEach((item) => {
        if (item.id === value) {
          address.value = `${item.province} ${item.area} ${item.city} ${item.address}`
        }
      })
    },
    { immediate: true },
  )
</script>

<template>
  <div v-loading="getAddressListLoading" class="base-info-return-factory-module-detail">
    <div class="title">基本信息</div>
    <div class="info-list">
      <div class="info-item">
        <div class="label">移动端显示:</div>
        <div class="value">{{ props.moduleDetail.mobileShow ? '显示' : '隐藏' }}</div>
      </div>
      <div class="info-item">
        <div class="label">审核权限:</div>
        <div class="value">{{
          props.moduleDetail.repairCheckRoot === 1 ? '自动审核' : '人工审核'
        }}</div>
      </div>
      <div class="info-item">
        <div class="label">审核人员:</div>
        <div class="value">
          <h-tooltip-text
            :text="props.moduleDetail.repairCheckRootEmps.join('、')"
            :max-width="160"
            :height="16"
          ></h-tooltip-text>
        </div>
      </div>
      <div class="info-item">
        <div class="label">审核方式:</div>
        <div class="value">{{
          props.moduleDetail.repairCheckType === 1 ? '按整单审核' : '单独审核'
        }}</div>
      </div>
      <div class="info-item">
        <div class="label">故障库:</div>
        <div class="value">{{ props.moduleDetail.enabledFault ? '开启' : '关闭' }}</div>
      </div>
      <div class="info-item">
        <div class="label">序列号校验:</div>
        <div class="value">{{ props.moduleDetail.enabledSnCodeCheck ? '开启' : '关闭' }}</div>
      </div>
      <div class="info-item">
        <div class="label">先发后收:</div>
        <div class="value">{{
          props.moduleDetail.enabledFirstSendAfterIncom ? '允许' : '禁止'
        }}</div>
      </div>
      <div class="info-item">
        <div class="label">费用确认:</div>
        <div class="value">{{ props.moduleDetail.sureFee ? '开启' : '关闭' }}</div>
      </div>
      <div class="info-item">
        <div class="label">部门选择:</div>
        <div class="value">{{ props.moduleDetail.enabledNetwork ? '允许' : '不允许' }}</div>
      </div>
      <div class="info-item">
        <div class="label">检测流程:</div>
        <div class="value">{{ props.moduleDetail.enabledCheckProcess ? '开启' : '关闭' }}</div>
      </div>
      <div class="info-item">
        <div class="label">服务报告:</div>
        <div class="value">{{ props.moduleDetail.enabledServiceReport ? '开启' : '关闭' }}</div>
      </div>
      <div class="info-item">
        <div class="label">物流填写:</div>
        <div class="value">{{ props.moduleDetail.enableWriteLogistics ? '开启' : '关闭' }}</div>
      </div>
      <div class="info-item">
        <div class="label">返厂签收:</div>
        <div class="value">{{ props.moduleDetail.enableRepairSignFor ? '开启' : '关闭' }}</div>
      </div>
      <div class="info-item">
        <div class="label">创建时间:</div>
        <div class="value">{{ props.moduleDetail.createTime }}</div>
      </div>
      <div class="info-item">
        <div class="label">更新时间:</div>
        <div class="value">{{ props.moduleDetail.updateTime }}</div>
      </div>
      <div class="info-item address">
        <div class="label">默认返厂地址:</div>
        <div class="value">
          <h-tooltip-text :text="address" :max-width="160" :height="16"></h-tooltip-text>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .base-info-return-factory-module-detail {
    display: flex;
    flex-direction: column;
    row-gap: 6px;

    .title {
      font-size: 12px;
      padding-left: 6px;
      font-weight: bold;
      border-left: 3px solid $primaryColor;
    }

    .info-list {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 240px));
      justify-content: space-between;
      column-gap: 32px;
      row-gap: 6px;
      box-sizing: border-box;
      padding: 0 12px;

      .info-item {
        display: flex;
        column-gap: 5px;

        .label {
          width: 76px;
          text-align: right;
        }
      }
    }
  }
</style>
